<template>
  <div class="trip-container">
    <!-- 顶部导航栏 -->
    <nav class="navbar">
      <div class="logo">西安之旅</div>
      <input type="text" v-model="searchQuery" placeholder="搜索景点" class="search-input">
    </nav>

    <!-- 景点列表 -->
    <div class="attraction-list">
      <div class="attraction-item" v-for="attraction in filteredAttractions" :key="attraction.id">
        <img :src="attraction.image" alt="Attraction Image" class="attraction-image">
        <div class="attraction-info">
          <h3 class="attraction-title">{{ attraction.name }}</h3>
          <p class="attraction-description">{{ attraction.description }}</p>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
   <!-- <footer class="footer">
      <div class="footer-item" @click="navigateToHome">首页</div>
      <div class="footer-item" @click="navigateToFavorites">收藏</div>
      <div class="footer-item" @click="navigateToProfile">我的</div>
    </footer> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      attractions: [
        {
          id: 1,
          name: '兵马俑',
          description: '世界闻名的考古遗址。',
          image: '/static/icon/111.jpg'
        },
        {
          id: 2,
          name: '大雁塔',
          description: '历史悠久的佛教圣地。',
          image: '/static/icon/222.jpg'
        },
		{
		  id: 3,
		  name: '华清池',
		  description: '温泉润,古迹韵悠长。',
		  image: '/static/icon/333.jpg'
		},
		{
		  id: 4,
		  name: '陕西历史博物馆',
		  description: '史韵浓,文物萃华堂。',
		  image: '/static/icon/444.jpg'
		},
		{
		  id: 5,
		  name: '大唐芙蓉园',
		  description: '唐韵盛，芙蓉映御园。',
		  image: '/static/icon/555.jpg'
		}
        // 添加更多景点
      ],
      searchQuery: ''
    };
  },
  computed: {
    filteredAttractions() {
      return this.attractions.filter(attraction =>
        attraction.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    navigateToHome() {
      // 实现导航到首页的逻辑
    },
    navigateToFavorites() {
      // 实现导航到收藏页面的逻辑
    },
    navigateToProfile() {
      // 实现导航到个人页面的逻辑
    }
  }
};
</script>

<style scoped>
.trip-container {
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 1.5em;
}

.search-input {
  padding: 5px;
  border: none;
  border-radius: 5px;
}

.attraction-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.attraction-item {
  background-color: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.attraction-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.attraction-info {
  padding: 10px;
}

.attraction-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.attraction-description {
  font-size: 1em;
  color: #666;
}

.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background-color: #333;
  color: #fff;
}

.footer-item {
  cursor: pointer;
}
</style>